// React中的受控表单
// textarea标签的内容，在React中，也是设置value属性来取值的。这里就不写textarea的例子了。

import React, {Component} from 'react';

class NameForm extends Component {
    constructor(props){
        super(props);
        this.state = {
            value: '',
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

        // 打印this看看指向
        console.log(this)
    }
    handleChange(e){
        this.setState({
            value: e.target.value
        })
    }
    handleSubmit(e){
        if(e.target.value){
            e.target.value = (e.target.value).tirm();
            console.log(`你提交的内容是${this.state.value}`)
        }
        e.preventDefault();
    }
    render(){
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        我是NameList组件，Name:
                        <input type="text" value={this.state.value} onChange={this.handleChange}/>
                    </label>
                    <input type="submit" value="submit"/>
                </form>
            </div>
        )
    }
}

export default NameForm;